import React from 'react'
import clsx from 'clsx'
import styles from './styles.module.css'
import PropTypes from 'prop-types'
import ecoImage from '/static/img/economy.png'
import logo from '/static/img/polyos-logo.png'

const CustCard = ({ title, text }) => {
  return (
    <div className={styles.cust_card_container}>
      <div className={styles.cust_card}>
        <div className="row row--no-gutters">
          <div className={clsx('col col--5', styles.left_col)}>
            <div
              className={clsx(
                'row row--no-gutters',
                styles.left_content
              )}>
              <div
                className={clsx('col col--12', styles.logo_content)}>
                <img
                  className={clsx('avatar__photo', styles.logo)}
                  src={logo}
                />
                <p className={styles.card_title}>{title}</p>
              </div>
            </div>
            <div
              className={clsx(
                'row row--no-gutters',
                styles.left_content
              )}>
              <div className="col col--12">
                <div>
                  <p className={styles.card_describe}>{text}</p>
                </div>
              </div>
            </div>
          </div>
          <div className={clsx('col col--7', styles.right_col)}>
            <div className={clsx('row', styles.image_container)}>
              <img
                src={ecoImage}
                className={styles.screenshot}
                alt="Screenshot"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

CustCard.propTypes = {
  title: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
}

export default CustCard
